<template>
	<view>
		<!-- F1 轮播图 开始 -->
	<view class="swiper-box">
		<u-swiper
		:list="banner"
		indicatorMode="line"
		circular
		imgMode="scaleToFill"
		>
		</u-swiper>
	</view>
		<!-- F1 轮播图 结束 -->
		
		<!-- F2 菜单 开始 -->
		<view class="menu-box">
			<view class="item" @click="jump(index)" v-for="(item,index) in menu" :key='index'>
				<image :src="item.icon" mode="aspectFit"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<!-- F2 菜单 结束 -->
		
		<!-- F3 瀑布流列表 开始 -->
		<view>
			<view class="title">
				美丽剑阁
			</view>
			<custom-waterfalls-flow :value="list" class="waterFlow">
			        <template v-slot:default="item">
			            <view class="item">
			                <view>{{item.title}}</view>
			                <view>{{item.time}}</view>
			            </view>
			        </template>
			</custom-waterfalls-flow>
		</view>		
		<!-- F3 瀑布流列表 结束 -->
		<wx-tabbar></wx-tabbar>
	</view>
</template>

<script>
	import wxTabbar from '@/components/wx-tabbar/wx-tabbar.vue'
	import customWaterfallsFlow from '@/components/custom-waterfalls-flow/custom-waterfalls-flow.vue'
	import {mapState,mapMutations} from 'vuex'
	export default {
		components:{
			wxTabbar,
			customWaterfallsFlow
		},
		data() {
			return {
				banner:[
					require('@/static/image/cultural_tourism/banner-1.png'),
					require('@/static/image/cultural_tourism/banner-1.png'),
					require('@/static/image/cultural_tourism/banner-1.png'),
				],
				menu:[
					{
						title:'景区实况',
						icon:require("@/static/image/cultural_tourism/sceneStream.png"),
						url:'/pages/cultural/sceneStream'
					},
					{
						title:'特色小镇',
						icon:require("@/static/image/cultural_tourism/specialTown.png"),
						url:'/pages/cultural/specialTown'
					},
					{
						title:'蜀道剑阁',
						icon:require("@/static/image/cultural_tourism/roadOf-jianGe.png")
					},
					{
						title:'剑阁历史',
						icon:require("@/static/image/cultural_tourism/jianGeHistory.png")
					},
				],
				list:[
					{ image: require('@/static/image/cultural_tourism/bacc.png'), title: '剑门奇险',time:'2011-04-23'}, 
					{ image: require('@/static/image/cultural_tourism/pic-2.png'), title: '剑门关',time:'2011-04-26'}, 
					{ image: require('@/static/image/cultural_tourism/pic-3.png'), title: '剑门关4',time:'2011-06-21'}, 
					{ image: require('@/static/image/cultural_tourism/pic-1.png'), title: '剑门奇险5',time:'2011-01-22'}, 
					{ image: require('@/static/image/cultural_tourism/pic-3.png'), title: '剑门奇险6',time:'2011-12-01'}, 
					{ image: require('@/static/image/cultural_tourism/pic-4.png'), title: '剑门奇险7',time:'2011-09-18'}
				]
			};
		},
		onShow(option) {
			uni.hideTabBar()
			// 从分包界面返回到首页需要重新设置tabbar的index值
			this.changeTabBar({
				index: 2
			})
		},
		methods:{
			...mapMutations(['changeTabBar']),
			jump(index){
				console.log('点击了：',this.menu[index].title);
				uni.showLoading({
					title:'加载中...'
				})
				uni.navigateTo({
					url:this.menu[index].url,
					success: () => {
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title:'加载失败，请重试',
							mask:true,
							icon:'error'
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
.swiper-box{
	border-radius: 8rpx;
	padding: 32rpx 32rpx 24rpx 32rpx;
}
.menu-box{
	display: flex;
	justify-content: space-around;
	.item{
		text-align: center;
		image{
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 6rpx;
		}
	}
}
.title{
		padding: 40rpx 0 10rpx 30rpx; 
		font-size: 36rpx;
	}
.waterFlow{
		padding: 20rpx; 
		margin-bottom: 80rpx;
		.item:nth-child(1){
			padding: 5rpx;
		}
		.item>view:nth-child(1){
			padding:3rpx 10rpx
		}
		.item>view:nth-child(2){
			padding-left:10rpx;
			font-size: 24rpx; 
			color: #999CA3;
		}
	}
</style>
